<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 History API</title>
    <link rel="stylesheet" href="./common.css">
</head>

<body>
    <!-- url 
    domain , 组织文件,  向用户提供很多资源
    链接把资源组织起来 
    一切皆资源  Restful  -->
    <div class="wrapper">
        <ul class="nav">
            <li><a href="home.html">Home</a></li>
            <li><a href="fluffy.html">Fluffy</a></li>
            <li><a href="socks.html">Socks</a></li>
            <li><a href="whiskers.html">Whiskers</a></li>
        </ul>
        <p class="content">Welcome to Kittens! Home of Fluffy, Socks, and Whiskers. If you're not suffering from a cute
            overdose within the hour, then you really are a heartless bugger! Now lets look at some cats!
        </p>
        <div class="media">
            <img src="http://www.ichong123.com/uploads/2014/08/m1.jpg" alt="">
        </div>
    </div>
    <script>
        // web 2.0
        // - xhr readyState
        //     - 1: 初始化 XMLHttpRequest 对象, 此时这个对象已被创建但是 open() 方法未被调用
        //         - 2: 调用 open() 方法 ，在 open() 这个方法中填写请求方式和请求地址，在这个阶段时可以使用 setRequestHeader()  添加请求头信息
        //             - 3: 调用 send() 方法，将请求发送至服务端
        //                 - 4: 响应体部分正在被接收。如果 responseType 属性是“text”或空字符串， responseText 将会在载入的过程中拥有部分响应数据
        //                     - 5: 请求发送完毕，此时意味着请求彻底完成或者发送失败
        function getHTML(href, callback) {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", href);
            xhr.send();// 发送请求
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    callback(xhr.responseText);
                }
            }
        }
        function createState(data) {
            // . 可以匹配任何字符
            // + 匹配一次或多次
            // （）表示分组
            const contentMatches = data.match(/content">(.+)"lu/);
            console.log(contentMatches);
            // const content = contentMatches[1];
            // console.log(content);
            const photoMatches = data.match(/img.+src="(.+)"\s/);
            console.log(photoMatches);
            // const photo = photoMatches[1];
            // console.log(photo);
            return {
                content,
                photo
            }
        }
        // ajax 后台刷新整个页面 不用白屏
        // 生命周期 所有资源都加载完成
        window.addEventListener('DOMContentLoaded', function () {
            const links = document.querySelectorAll('.nav li a');
            links.forEach(link => {
                link.addEventListener('click', function (event) {
                    event.preventDefault();
                    let href = event.target.href;
                    console.log(href);
                    // const xhr = new XMLHttpRequest();
                    getHTML(href, function (data) {
                        // callback
                        // console.log(data);
                        let state = createState(data);
                        document.querySelector('.content').innerText = state.content;
                        document.querySelector('.photo').src = state.photo;
                    })

                })
            })
        })
    </script>
</body>

</html>